<template>
  <div class="custom_url_style">
    <div style="margin-bottom: 15px; text-align: center">
      <!-- <el-form-item> -->
      <el-radio-group
        v-model="value.dataType"
        size="small"
        @change="dataTypeChange"
      >
        <el-radio-button
          v-if="typeList.indexOf('static') != '-1'"
          label="static"
          >静态数据</el-radio-button
        >
        <el-radio-button
          v-if="typeList.indexOf('dynamic') != '-1'"
          label="dynamic"
          >远端数据</el-radio-button
        >
        <el-radio-button
          v-if="typeList.indexOf('service') != '-1'"
          label="service"
          >服务接口</el-radio-button
        >
      </el-radio-group>
      <!-- </el-form-item> -->
    </div>
    <!-- <el-form-item label="数据设置" v-if="value.dataType === 'static'">
      <el-button @click="showData(value.option)">查看</el-button>
    </el-form-item> -->
    <el-form-item label="数据接口" v-if="value.dataType === 'dynamic'">
      <tree-select
        :options="dataInterfaceOptions"
        v-model="value.propsApi"
        placeholder="请选择数据接口"
        lastLevel
        lastLevelKey="categoryId"
        lastLevelValue="1"
        clearable
      />
    </el-form-item>
    <template v-if="value.dataType === 'service'">
      <el-form-item label="" class="custom_url_style">
        <el-input
          placeholder="请输入接口地址"
          v-model="value[api]"
          class="input-with-select"
        >
          <el-select
            style="width: 80px"
            v-model="value.customUrlPostType"
            slot="prepend"
            placeholder="请选择"
          >
            <el-option label="GET" value="GET"></el-option>
            <el-option label="POST" value="POST"></el-option>
          </el-select>
          <el-button slot="append" @click="postFieldChart">请求</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="参数设置">
        <el-button @click="requestFocus">设置</el-button>
      </el-form-item>
      <el-form-item label="数据处理" v-if="isShowDataHandle">
        <el-button @click="editFunc()">接口数据处理</el-button>
      </el-form-item>
    </template>
    <el-dialog
      :modal-append-to-body="false"
      :append-to-body="false"
      :visible.sync="requestParamVisible"
      v-if="requestParamVisible"
      width="50%"
    >
      <div class="textarea_style">
        <el-input
          type="textarea"
          :rows="7"
          placeholder="请输入内容"
          v-model="value[paramsFild]"
        >
        </el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="requestParamVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureRequestParam">确 定</el-button>
      </span>
    </el-dialog>
    <form-script
      v-if="formScriptVisible"
      :visible.sync="formScriptVisible"
      :value="value.dataProcessing"
      @updateScript="updateScript"
      ref="formScript"
    />
  </div>
</template>

<script>
import FormScript from "./FormScript";
import request from "@/utils/request";
import { getDataInterfaceSelector } from "@/api/systemData/dataInterface";
import { string } from "clipboard";
const defaultDataHandler =
  "(data) => {\r\n    // 处理数据逻辑\r\n\r\n    // 返回所需的数据\r\n    return data\r\n}";
export default {
  components: { FormScript },
  props: {
    value: {
      type: Object,
      default: () => {},
      event: "input", // 默认是 input
    },
    typeList: {
      type: Array,
      default: () => ["static", "dynamic", "service"],
    },
    isShowDataHandle: {
      type: Boolean,
      default: () => true,
    },
    api: {
      type: String,
      default: () => "interfaceUrl",
    },
    paramsFild: {
      type: String,
      default: () => "requestParam",
    },
  },
  data() {
    return {
      requestParamVisible: false,
      formScriptVisible: false,
      dataInterfaceOptions: [],
    };
  },
  created() {
    this.getDataInterfaceSelector();
  },
  methods: {
    updateScript(data) {
      console.log(data);
      // let handleFn = eval(data);
      // let handleData = handleFn(2);
      // console.log(handleData);
      this.value.dataProcessing = data;
    },
    sureRequestParam() {
      this.requestParamVisible = false;
      // this.value.requestParam = this.requestParamTextarea;
    },
    editFunc() {
      console.log(this.value.dataProcessing, "----");
      if (!this.value.dataProcessing) {
        this.value.dataProcessing = defaultDataHandler;
      }
      this.formScriptVisible = true;
      this.$nextTick(() => {
        this.$refs.formScript.onOpen();
      });
    },
    requestFocus() {
      let _this = this;
      this.requestParamVisible = true;
      // this.requestParamTextarea = this.value.requestParam;
      // _this.$refs.requestParam.blur();
    },
    postFieldChart() {
      request({
        url: this.value.interfaceUrl,
        method: this.value.customUrlPostType,
        data: this.value.requestParam
          ? JSON.parse(this.value.requestParam)
          : {},
      }).then((res) => {
        console.log(this.value.dataProcessing, "----");
        // let handleFn = eval(this.value.dataProcessing);
        // let handleData = handleFn(res.data);
        // console.log(handleData);
        // let xAxisData = [];
        // res.data.forEach((item) => {
        //   xAxisData.push(item.itemDate);
        // });
        // this.value.option.xAxis[0].data = xAxisData;
      });
    },
    showData(option) {
      this.areaVisible = true;
      this.$nextTick(() => {
        this.$refs.JSONArea.init(option);
      });
    },
    dataTypeChange() {
      this.value.propsApi = "";
      if (this.value.dataType == "service") {
        if (!this.value.dataArrOption || this.value.dataArrOption.length == 0) {
          let arr = [
            {
              field: "",
              fieldName: "",
            },
          ];
          this.$set(this.value, "dataArrOption", arr);
          // this.value.dataArrOption.push();
        }
      }
      // this.$emit("sentActiveDataData", this.value);
    },
    getDataInterfaceSelector() {
      getDataInterfaceSelector().then((res) => {
        this.dataInterfaceOptions = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.right-box {
  background: #fff;
  border-radius: 4px;
  .cap-wrapper {
    text-align: center;
  }
  >>> .el-scrollbar__view {
    padding: 15px;
  }
  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;
    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }
    .el-select {
      flex: 1;
    }
  }
  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #606266;
  }
  .dataBoard-item {
    .el-form-item--small.el-form-item {
      margin-bottom: 10px;
    }
    .el-divider--horizontal {
      margin: 14px 0;
    }
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .head-icon {
        color: #f56c6c;
      }
    }
  }
  .table_del {
    text-align: center;
    color: #f56c6c;
  }
  .custom_url_style {
    >>> .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
.textarea_style {
  padding: 20px !important;
}
</style>
